import * as echarts from "echarts";
import { generateRandomColorArray } from "@/utils/ruoyi";

// 满意度统计图
export function initSatisfactionChart(
  satisfyNum,
  noramlNum,
  dissatisfyNum,
  total
) {
  return {
    title: {
      text: "总体满意度",
      left: "auto",
      top: "10",
      textStyle: {
        color: "#000",
        fontWeight: "bold",
      },
    },
    tooltip: {
      trigger: "item",
    },
    graphic: {
      type: "text",
      left: "center",
      top: "center",
      style: {
        text: total,
        textAlign: "center",
        fill: "#000",
        fontSize: 50,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: true,
            lineHeight: 10,
            // position: 'inside',
            formatter: "{b}：{d}%", //自定义显示格式(b:name, c:value, d:百分比)
            fontSize: 14, // 字体大小
          },
          rich: {},
        },
        labelLine: {
          show: true,
          length: 10, // 引导线的长度
          smooth: 0.2, // 引导线平滑度
        },
        data: [
          { value: satisfyNum, name: "满意", itemStyle: { color: "#39FB00" } },
          { value: noramlNum, name: "一般", itemStyle: { color: "#4AABFF" } },
          {
            value: dissatisfyNum,
            name: "不满意",
            itemStyle: { color: "#F55300" },
          },
        ],
      },
    ],
  };
}

// 年度服务评价趋势柱状图
export function initEvatrendChart(xdata, ydata) {
  return {
    title: {
      text: "服务评价趋势",
      left: "auto",
      top: "10",
      textStyle: {
        color: "#000",
        fontWeight: "bold",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xdata,
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisLabel: {
          color: "#000000",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        minInterval: 1,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          color: "#8A8A8A",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "评价次数",
        type: "bar",
        barWidth: "45%",
        data: ydata,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // x1, y1, x2, y2 定义渐变方向
            [
              { offset: 0, color: "#88C5EC" },
              { offset: 1, color: "#4299FE" },
            ]
          ),
        },
      },
    ],
  };
}

// 评价总数柱状图
export function initEvatotalChart(xdata, ydata, total) {
  return {
    title: {
      text: `评价总数：${total}`,
      left: "auto",
      top: "10",
      textStyle: {
        color: "#000",
        fontWeight: "bold",
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xdata,
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisLabel: {
          color: "#000000",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        minInterval: 1,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          color: "#8A8A8A",
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "value",
        name: "单位/次",
        nameTextStyle: {
          color: "#000",
          padding: [0, 45, 15, 0], //间距分别是 上 右 下 左
        },
      },
    ],
    series: [
      {
        name: "评价次数",
        type: "bar",
        barWidth: "35%",
        data: ydata,
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // x1, y1, x2, y2 定义渐变方向
            [
              { offset: 0, color: "#69D2F9" },
              { offset: 1, color: "#2EA1D4" },
            ]
          ),
        },
      },
    ],
  };
}

// 个人评价年度统计柱状图
export function initUserEvaYearChart(xdata = [], ydata = [], police = "") {
  return {
    title: {
      text: `姓名：${police}`,
      left: "auto",
      top: "10",
      textStyle: {
        color: "#000",
        fontWeight: "normal",
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "1%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: xdata,
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisLabel: {
          color: "#000000",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        minInterval: 1,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#707070",
          },
        },
        axisTick: {
          show: true,
        },
        axisLabel: {
          color: "#8A8A8A",
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: "value",
        name: "单位/次",
        nameTextStyle: {
          color: "#000",
          padding: [0, 45, 15, 0], //间距分别是 上 右 下 左
        },
      },
    ],
    series: [
      {
        name: "评价次数",
        type: "bar",
        barWidth: 30,
        data: ydata,
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1, // x1, y1, x2, y2 定义渐变方向
            [
              { offset: 0, color: "#69D2F9" },
              { offset: 1, color: "#2EA1D4" },
            ]
          ),
        },
      },
    ],
  };
}

// 民警评价数量排序图
export function initUserEvaNumSortChart(xdata = [], ydata = [], comArr = []) {
  let colorList = generateRandomColorArray(ydata.length + 1);
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params) {
        var html = params[0].name + "<br>";
        // params[i].marker：对应数据的圆点样式
        for (var i = 0; i < params.length - 1; i++) {
          html +=
            "所属社区：" +
            comArr[params[0].dataIndex] +
            "<br>" +
            params[i].seriesName +
            "：" +
            params[i].value;
        }
        return html;
      },
    },
    grid: {
      left: "1%",
      right: "5%",
      bottom: "1%",
      top: "0%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: { color: "#000000" },
        data: xdata,
      },
    ],
    series: [
      {
        zlevel: 1,
        name: "评价次数",
        type: "bar",
        barWidth: 18,
        data: ydata,
        align: "center",
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex % colorList.length];
          },
        },
        label: {
          show: true,
          formatter: (a) => {
            return comArr[a.dataIndex];
          },
          fontSize: 10,
          color: "#fff",
          padding: [2, 0, 0, 0],
        },
      },
      {
        type: "bar",
        name: "评价次数",
        barWidth: 18,
        barGap: "-100%",
        data: ydata,
        itemStyle: {
          color: "rgba(255,255,255)",
        },
        label: {
          show: true,
          position: "right",
        },
      },
    ],
    // 开启柱状图的滚动条
    dataZoom: [
      {
        // 设置滚动条的隐藏或显示
        show: xdata.length > 8 ? true : false,
        // 设置类型
        type: "slider",
        // 设置背景颜色
        backgroundColor: "rgb(255, 255, 255)",
        // 设置选中范围的填充颜色
        fillerColor: "#2680eb",
        // 设置边框颜色
        borderColor: "#2680eb",
        // 是否显示detail，即拖拽时候显示详细数值信息
        showDetail: false,
        // 数据窗口范围的起始数值
        startValue: 0,
        // 数据窗口范围的结束数值（一页显示多少条数据）
        endValue: 7,
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // empty：当前数据窗口外的数据，被设置为空。
        // 即不会影响其他轴的数据范围
        filterMode: "empty",
        // 滚动条高度
        width: 5,
        // 滚动条显示位置
        height: "60%",
        // 距离右边
        right: 3,
        // 控制手柄的尺寸
        handleSize: 0,
        // 是否锁定选择区域（或叫做数据窗口）的大小
        zoomLoxk: true,
        // 组件离容器上侧的距离
        // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
        top: "middle",
      },
      {
        // 没有下面这块的话，只能拖动滚动条，
        // 鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        // 控制哪个轴，如果是number表示控制一个轴，
        // 如果是Array表示控制多个轴。此处控制第二根轴
        yAxisIndex: [0, 1],
        // 滚轮是否触发缩放
        zoomOnMouseWheel: false,
        // 鼠标移动能否触发平移
        moveOnMouseMove: true,
        // 鼠标滚轮能否触发平移
        moveOnMouseWheel: true,
      },
    ],
  };
}
